<template>
  <div>
    图片到视频
    <el-upload action="#"
               ref="uploadRef"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
               :on-error="handleUploadError"
               :on-remove="handleRemove"
               :on-change="handleChange"
               :on-exceed="handleExceed"
               :disabled="disabled"
               :auto-upload="false"
               :show-file-list="true"
               :file-list="fileList"
               :headers="headers"
               multiple
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-button @click='picsToVideoMp4'>装换</el-button>
    <div ref="playerRef">
    </div>
  </div>
</template>

<script>
import {getMuiPlayer} from "@localModules/ZhiXinLib/utils/MuiPlayerUtils/MuiPlayerUtils";
import ElUploadMixin from "@localModules/ZhiXinLib/mixins/ElUploadMixin";
import {FFmpegUtils} from "@localModules/ZhiXinLib/utils/FFmpegUtils";

export default {
  name: "Pics2Mp4",
  mixins: [ElUploadMixin],
  data() {
    return {
      player: null
    }
  },
  methods: {
    async picsToVideoMp4() {
      if (this.player) {
        this.player.destroy()
      }
      const fFmpegUtils = new FFmpegUtils();
      await fFmpegUtils.initFFmpeg({log: true})
      const pics = this.fileList.map(i => {
        return {
          name: i.name,
          data: i.raw
        }
      })
      const s = await fFmpegUtils.readSomePic(pics);
      const url = await fFmpegUtils.picsToVideo({
        pre: s,
        suffix: 'jpg'
      }, 1)
      this.player = getMuiPlayer(this.$refs.playerRef, url, {
        autoplay: true,
        loop: true
      })
      this.player.specifyTheCodec('.mp4')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
